<template>
  <PageTabbar :themeColor="themeColor">
    <view class="page-content">
      <!-- 顶部渐变背景 -->
      <view class="gradient-header" :style="gradientStyle">
        <view class="header-content">
          <text class="header-title">云工具箱</text>
          <text class="header-subtitle">便捷高效的多功能工具集合</text>
        </view>
      </view>
      
      <view class="container">
        <!-- 工具箱列表 -->
        <view class="tools-section">
          <view class="section-title">常用工具</view>
          <scroll-view class="tools-scroll" scroll-x="true" show-scrollbar="false">
            <view class="tools-wrapper">
              <!-- 将工具分组为每组两个 -->
              <view 
                v-for="(group, groupIndex) in toolGroups" 
                :key="groupIndex"
                class="tool-column"
              >
                <view 
                  v-for="tool in group" 
                  :key="tool.id"
                  class="tool-item" 
                  @tap="navigateToTool(tool)"
                >
                  <view class="tool-icon">
                    <u-icon :name="tool.icon" size="40" :color="tool.bgColor"></u-icon>
                  </view>
                  <text class="tool-name">{{ tool.name }}</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </PageTabbar>
</template>

<script setup lang="ts">
import { ref, inject, Ref, onMounted, computed } from 'vue';
import PageTabbar from '../../components/PageTabbar.vue';
import useSystemInfo from '../../hooks/useSystemInfo';
import { STORAGE_KEYS } from '../../constants';

// 获取系统信息
const { statusBarHeight, headerHeight } = useSystemInfo();

// 尝试从App.vue注入的主题色
const themeColor = inject<Ref<string>>('themeColor', ref('#07c160'));

// 缓存的主题色
const cachedThemeColor = ref('');

// 渐变背景样式
const gradientStyle = computed(() => {
  // 计算胶囊按钮区域的高度
  const capsuleHeight = headerHeight.value - statusBarHeight.value;
  // 计算状态栏加胶囊高度减半的位置
  const topPosition = statusBarHeight.value + capsuleHeight / 2;
  
  return {
    background: `${cachedThemeColor.value || 'linear-gradient(90deg, #7EB9FF, #A6C1FF)'}`,
    marginTop: `${topPosition}px` // 减去色块高度的一半(180rpx/2 = 90rpx)，使其居中
  };
});

// 工具列表数据类型定义
interface Tool {
  id: number;
  name: string;
  icon: string;
  bgColor: string;
  path: string;
}

// 工具列表数据
const toolsList = ref<Tool[]>([
  { 
    id: 1, 
    name: '视频去水印', 
    icon: 'play-circle-fill', 
    bgColor: '#7EB9FF',
    path: '/pages/tools/watermark-remover'
  },
  { 
    id: 2, 
    name: '图片处理', 
    icon: 'photo', 
    bgColor: '#A6C1FF',
    path: '/pages/tools/image-processor'
  },
  { 
    id: 3, 
    name: '文本工具', 
    icon: 'edit-pen', 
    bgColor: '#8EECFF',
    path: '/pages/tools/text-tools'
  },
  { 
    id: 4, 
    name: '计算工具', 
    icon: 'integral', 
    bgColor: '#7EFFCF',
    path: '/pages/tools/calculator'
  },
  { 
    id: 5, 
    name: '二维码', 
    icon: 'scan', 
    bgColor: '#FFB17E',
    path: '/pages/tools/qrcode'
  },
  { 
    id: 6, 
    name: '单位换算', 
    icon: 'reload', 
    bgColor: '#FFA6C1',
    path: '/pages/tools/unit-converter'
  },
  { 
    id: 7, 
    name: '时间工具', 
    icon: 'calendar', 
    bgColor: '#D7A6FF',
    path: '/pages/tools/time-tools'
  },
  { 
    id: 8, 
    name: '更多工具', 
    icon: 'more-dot-fill', 
    bgColor: '#A6A6A6',
    path: '/pages/tools/more'
  }
]);

// 将工具列表分组为每组两个（一列）
const toolGroups = computed(() => {
  const groups = [];
  const tools = toolsList.value;
  
  for (let i = 0; i < tools.length; i += 2) {
    const group = [];
    group.push(tools[i]);
    if (i + 1 < tools.length) {
      group.push(tools[i + 1]);
    }
    groups.push(group);
  }
  
  return groups;
});

// 跳转到工具页面
const navigateToTool = (tool: Tool) => {
  console.log('跳转到工具:', tool.name);
  uni.navigateTo({
    url: tool.path,
    fail: (err) => {
      console.error('跳转失败:', err);
      uni.showToast({
        title: '该功能正在开发中',
        icon: 'none'
      });
    }
  });
};

// 确保页面加载时使用最新的缓存主题色
onMounted(() => {
  // 从缓存中获取主题色
  try {
    const userInfo = uni.getStorageSync(STORAGE_KEYS.USER_INFO) || {};
    const avatarUrl = userInfo.avatarUrl;
    
    if (avatarUrl) {
      const cachedThemeColors = uni.getStorageSync('THEME_COLORS') || {};
      if (cachedThemeColors[avatarUrl]) {
        cachedThemeColor.value = cachedThemeColors[avatarUrl].gradientColor;
        console.log('首页使用缓存的主题色:', cachedThemeColor.value);
      }
    }
  } catch (error) {
    console.error('首页获取缓存主题色失败:', error);
  }
});
</script>

<style>
.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.gradient-header {
  height: 300rpx;
  width: 94%;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-title {
  font-size: 52rpx;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20rpx;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  position: relative;
  display: inline-block;
}

.header-title::after {
  content: '';
  position: absolute;
  bottom: -6rpx;
  left: 0;
  width: 100%;
  height: 6rpx;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 3rpx;
}

.header-subtitle {
  font-size: 28rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  padding: 0 10rpx;
}

.container {
  width: 100%;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}

.tools-section {
   width: 94%;
  margin: 0 auto;
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
}

.tools-scroll {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  /* mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%); */
}

.tools-wrapper {
  display: flex;
  padding: 10rpx 0;
  width: max-content;
}

.tool-column {
  display: flex;
  flex-direction: column;
  /* width: 40%; */
  margin-right: 20rpx;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  padding: 10rpx;
}

.tool-item:last-child {
  margin-bottom: 0;
}

.tool-icon {
  width: 25vw;
  /* height: 100rpx; */
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12rpx;
  background-color: #ffffff;
}

.tool-icon .iconfont {
  font-size: 60rpx;
  color: #ffffff;
}

.tool-name {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10rpx;
}
</style>
